import emitter from "../utils/eventbus";
import * as d3 from "d3";
import d3DrawStore from "../store/modules/d3Draw";

//初始化套管（增）
/**
 * 
 * @param $ 
 * @param width 套管宽度
 * @param heightStart 套管起始点
 * @param heightEnd 套管终点
 * @param d3CanvasRef 画布信息
 */
export function initCasing($: any, d3CanvasRef: any, width: number, heightStart: number, heightEnd: number) {
  let id: string = $.attr("id");
  const d3Canvas = d3CanvasRef;//画布信息
  const widthCenter = d3Canvas.offsetWidth / 2 //中心线
  const casing = { left: undefined, right: undefined, leftTriangle: undefined, rightTriangle: undefined }
  const triangleSize = 10; // 三角形的大小
  const yScale = d3DrawStore().scale
  const start = yScale(heightStart)
  const end = yScale(heightEnd)
  casing.left = $.append("line")
    .attr("x1", widthCenter - width / 2)
    .attr("y1", start)
    .attr("x2", widthCenter - width / 2)
    .attr("y2", end)
    .attr("stroke-width", 2)
    .attr("stroke", "black");
  casing.right = $.append("line")
    .attr("x1", widthCenter + width / 2)
    .attr("y1", start)
    .attr("x2", widthCenter + width / 2)
    .attr("y2", end)
    .attr("stroke-width", 2)
    .attr("stroke", "black");
  casing.leftTriangle = $.append("polygon")
    .attr("points", `${widthCenter - width / 2 - triangleSize}, ${end - triangleSize - 1} ${widthCenter - width / 2}, ${end - triangleSize - 1} ${widthCenter - width / 2}, ${end - triangleSize - 1 + triangleSize}`)
    .attr("fill", "none")
    .attr("stroke-width", 0.5)
    .attr("stroke", "black");
  casing.rightTriangle = $.append("polygon")
    .attr("points", `${widthCenter + width / 2}, ${end - triangleSize - 1} ${widthCenter + width / 2 + triangleSize}, ${end - triangleSize} ${widthCenter + width / 2}, ${end - triangleSize - 1 + triangleSize}`)
    .attr("fill", "none")
    .attr("stroke-width", 0.5)
    .attr("stroke", "black");
  // 使用D3拖动行为实现线段的拖动
  const drag = d3
    .drag()
    .on("drag", (event) => {
      const newY2 = event.y;
      casing.left.attr("y2", newY2);
      casing.right.attr("y2", newY2);
      casing.leftTriangle.attr("points", `${widthCenter - width / 2 - triangleSize}, ${newY2 - triangleSize - 1} ${widthCenter - width / 2}, ${newY2 - triangleSize - 1} ${widthCenter - width / 2}, ${newY2 - triangleSize - 1 + triangleSize}`);
      casing.rightTriangle.attr("points", `${widthCenter + width / 2}, ${newY2 - triangleSize - 1} ${widthCenter + width / 2 + triangleSize}, ${newY2 - triangleSize - 1} ${widthCenter + width / 2}, ${newY2 - triangleSize - 1 + triangleSize}`)
    });

  // 应用拖动行为到线段上
  casing.left.call(drag);
  casing.right.call(drag)

  emitter.on(id, (transform: any) => {
    casing.left.attr("transform", transform);
    casing.right.attr("transform", transform);
    casing.leftTriangle.attr("transform", transform);
    casing.rightTriangle.attr("transform", transform);
  });

  return casing
}
export function updateCasing(casing: any, d3CanvasRef: any, width: number, heightStart: number, heightEnd: number, color: string = "red") {
  // const widthCenter = casing.value.left.attr("x1") + width / 2;
  const widthCenter = d3CanvasRef.offsetWidth / 2 //中心线\
  const triangleSize = 10; // 三角形的大小
  const yScale = d3DrawStore().scale
  const start = yScale(heightStart)
  const end = yScale(heightEnd)
  casing.left
    .attr("x1", widthCenter - width / 2)
    .attr("x2", widthCenter - width / 2)
    .attr("y1", start)
    .attr("y2", end)
    .attr("stroke", color);

  casing.right
    .attr("x1", widthCenter + width / 2)
    .attr("x2", widthCenter + width / 2)
    .attr("y1", start)
    .attr("y2", end)
    .attr("stroke", color);

  casing.leftTriangle
    .attr("points", `${widthCenter - width / 2 - 10}, ${end - 10} ${widthCenter - width / 2}, ${end - 10} ${widthCenter - width / 2}, ${end}`)
    .attr("stroke", color);
  casing.rightTriangle
    .attr("points", `${widthCenter + width / 2}, ${end - 10} ${widthCenter + width / 2 + 10}, ${end - 10} ${widthCenter + width / 2}, ${end}`)
    .attr("stroke", color);
  return casing;
}
export function changeBlack(casing: any, color: string = "black") {
  casing.left
    .attr("stroke", color);
  casing.right
    .attr("stroke", color);
  casing.rightTriangle
    .attr("stroke", color);
  casing.leftTriangle
    .attr("stroke", color);
}
export function changeRed(casing: any, color: string = "red") {
  casing.left
    .attr("stroke", color);
  casing.right
    .attr("stroke", color);
  casing.rightTriangle
    .attr("stroke", color);
  casing.leftTriangle
    .attr("stroke", color);
}
export function deleteCasing(casing: any) {
  casing.left.remove();
  casing.right.remove();
  casing.rightTriangle.remove();
  casing.leftTriangle.remove();
}
